<template>
  <view class="main">
    <view class="top">
      <search leftWidth='300' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>收到的赞</text>
          </view>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <blockquote v-show="dzList.length!=0">
        <view v-for="e in dzList" class="item">
          <view class="avator">
            <u-avatar-group :urls="dealImgs(e.userInfo)" size="35" gap="0.4"></u-avatar-group>
            <view class="info">
              <view class="con">
                {{dealText(e.userInfo)}} 赞了我
              </view>
              <view class="time">
                {{e.articleInfo[e.articleInfo.length-1].createTime}}
              </view>
            </view>
          </view>
          <view class="content">
            <u-tooltip  :text="e.content" direction="bottom"></u-tooltip>
          </view>
        </view>
      </blockquote>
      <blockquote>
        <view v-show="dzList.length==0">
          <text style="color: #cccccc;margin:100rpx">暂无点赞信息</text>
        </view>
      </blockquote>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue";
  import {
    cmode
  } from '@/env.js'
  import {
    getfocuslist,
    cancelfocus,
    getsddzInfo
  } from '@/api/user.js'
  export default {
    components: {
      search
    },
    data() {
      return {
        dzList: [],
        basesrc: cmode,
        urls: [
          'https://cdn.uviewui.com/uview/album/1.jpg',
          'https://cdn.uviewui.com/uview/album/2.jpg',
        ]
      };
    },
    computed: {
      dealImgs() {
        return function(data) {
          if (data) {
            return data.map(e => this.basesrc + e.avator).splice(0, 2)
          } else {
            return []
          }
        };
      },
      dealText() {
        return function(data) {
          if (data) {
            if (data.length >= 2) {
              return data.map(e => e.nickname).splice(0, 2).toString() + '等' + data.length + '人'
            } else {
              return data.map(e => e.nickname).splice(0, 2).toString()
            }
          } else {
            return []
          }
        };
      }
    },
    methods: {
      cgetsddzInfo() {
        getsddzInfo().then(res => {
          console.log(res.data);
          this.dzList = res.data.filter(e => e.articleInfo.length != 0)
        })
      },
      goBack() {
        this.$Router.back()
      },
    },
    onShow() {
      this.cgetsddzInfo()
    },
    onReady() {
      this.cgetsddzInfo()
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    width: 100vw;
    height: auto;

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 100rpx);
      color: black;
      box-sizing: border-box;
      font-size: 28rpx;

      .item {
        padding: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 4rpx solid #c00000;
        font-size: 24rpx;

        .avator {
          display: flex;
          align-items: center;

          .info {
            margin-left: 30rpx;

            .time {
              font-size: 22rpx;
            }
          }
        }

        .content {
          font-size: 20rpx;
          color: gray;
          width: 120rpx;
          align-items: center;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .left {
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }


    }
  }
</style>
